<script>
import { reactive, toRefs } from "vue";
import LineChartBaghE from "@/components/Charts/LineCharts/Hours/Hours14to18/Bags/LineChartBaghE.vue";
import LineChartBaghN from "@/components/Charts/LineCharts/Hours/Hours14to18/Bags/LineChartBaghN.vue";
import LineChartBaghS from "@/components/Charts/LineCharts/Hours/Hours14to18/Bags/LineChartBaghS.vue";
import LineChartBaghWN from "@/components/Charts/LineCharts/Hours/Hours14to18/Bags/LineChartBaghWN.vue";
import LineChartBaghW from "@/components/Charts/LineCharts/Hours/Hours14to18/Bags/LineChartBaghW.vue";
import LineChartFlowhE from "@/components/Charts/LineCharts/Hours/Hours14to18/Flows/LineChartFlowhE.vue";
import LineChartFlowhN from "@/components/Charts/LineCharts/Hours/Hours14to18/Flows/LineChartFlowhN.vue";
import LineChartFlowhS from "@/components/Charts/LineCharts/Hours/Hours14to18/Flows/LineChartFlowhS.vue";
import LineChartFlowhW from "@/components/Charts/LineCharts/Hours/Hours14to18/Flows/LineChartFlowhW.vue";
import LineChartFlowhWN from "@/components/Charts/LineCharts/Hours/Hours14to18/Flows/LineChartFlowhWN.vue";
import LineChartGenderhE from "@/components/Charts/LineCharts/Hours/Hours14to18/Genders/LineChartGenderhE.vue";
import LineChartGenderhN from "@/components/Charts/LineCharts/Hours/Hours14to18/Genders/LineChartGenderhN.vue";
import LineChartGenderhS from "@/components/Charts/LineCharts/Hours/Hours14to18/Genders/LineChartGenderhS.vue";
import LineChartGenderhW from "@/components/Charts/LineCharts/Hours/Hours14to18/Genders/LineChartGenderhW.vue";
import LineChartGenderhWN from "@/components/Charts/LineCharts/Hours/Hours14to18/Genders/LineChartGenderhWN.vue";
export default {
  components: {LineChartBaghN,LineChartBaghWN,LineChartBaghS,LineChartBaghW,LineChartBaghE,
    LineChartFlowhE,LineChartFlowhN,LineChartFlowhS,LineChartFlowhW,LineChartFlowhWN,
    LineChartGenderhE,LineChartGenderhN,LineChartGenderhS,LineChartGenderhW,LineChartGenderhWN,
  },
  setup() {
    const state = reactive({
      labelListh: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      dataListFlowh: [
      175,150, 230, 224, 218, 135, 200, 129, 208, 125,
        160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
       100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
        100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
        208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
        160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
       100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
        100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
        208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      ],
      dataListGenderh: [
      175,150, 230, 224, 218, 135, 200, 129, 208, 125,
        160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
       100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
        100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
        208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
        160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
       100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
        100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
        208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      ],
      dataListBagh: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
        160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
       100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
        100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
        208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      ],

    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:33.3%">
  <LineChartFlowhN :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhWN :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhS :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhW :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhE :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    </div>
  <div style="display: flex; height:33.3%">
    <LineChartGenderhN :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhWN :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhS :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhW :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhE :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
</div>
<div style="display: flex; height:33.3%">
    <LineChartBaghN :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghWN :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghS :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghW :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghE :labelListh="labelListh" :dataListBagh="dataListBagh" />
</div>
</template>
<style scoped>
</style>





















